<template>
    <div :id="mapId"
         class="MapItemId"
    ></div>
</template>

<script>
    export default {
        props: {
            mapId: String, //传入div的id
            position: Array,
            initAngle: Object,
            reset: String,//是否重置
        },
        data: function () {
            return {
                allBridge: [
                    [150, 160],
                    [150, 220],
                    [550, 160],
                    [550, 220],
                ],
                turnBridge: [
                    [0, 0],
                    [60, 0],
                ],

                turnBridgeNode: {},

                size: 10,
                getProportion: 10,


                //地图里面对象的初始化
                svgViewport: {},
                gX: {},
                gY: {},
                gridlinesX: {},
                gridlinesY: {},
                bkg: {},
                //初始化g，相当于初始化画布
                innerSpace: {},
                //标签id和基站
                stationPos: {},

                //在地图缩放时重新算坐标系用
                newx: null,
                newy: null,
                scale: null,

                maxEnlarge: null,
                maxNarrow: null,
            }
        },
        mounted() {
            this.init()
        },
        watch: {
            position: function () {
                this.startMove()
            },
        },
        methods: {
            addInnerSpace: function () {
                return this.svgViewport.append("g")
                    .attr("class", "inner_space")
            },
            zoom: function () {
                return d3.zoom()
                // .on("zoom", this.zoomFunction)
                    .scaleExtent([this.maxNarrow, this.maxEnlarge])
            }, //缩放程度
            addNodeLayer: function () {
                return this.innerSpace.append("g")
            },//创建一个g相当于创建一个div
            createText: function (nodeID, node_x, node_y, name, color) {
                var a = this.initCoordinate()[0];
                var b = this.initCoordinate()[1];
                var coor = this.nodeLayer.append("text")
                    .attr("id", nodeID)
                    .attr("x", this.xAxisScale()(node_x) - this.size / b)
                    .attr("y", this.yAxisScale()(node_y) + this.size * 2 / b)
                    .text(name)
                    .attr("font-size", this.size / b)
                    .attr("fill", color || "black")
                    .attr("transform", a)
                coor.info = {x: node_x, y: node_y, offest_x: this.size, offest_y: this.size * 2}
                return coor
            },//创建基站下面的文字，并根据图标一起动

            initCoordinate: function () {
                var a = this.bkg[this.mapId].attr("transform")
                var b;
                if (a != null) {
                    var c = a.split(/[(]|[)]/)
                    b = parseFloat(c[c.length - 2])
                } else {
                    b = 1
                }
                return [a, b];
            },
            createCanvas: function () {
                this.svgViewport = d3.select("#" + this.mapId)
                    .append("svg")
                    .attr("preserveAspectRatio", "xMinYMin meet")
                    .attr("viewBox", "0 0 " + this.svgWidth + " " + this.svgHeight) // <min-x>, <min-y>, width 和 height。
                    .classed("svg-container", true)
                    .call(this.zoom());

                this.innerSpace = this.addInnerSpace();
                this.nodeLayer = this.addNodeLayer();
                // this.createArrow();
                this.addCanvasGridLines();
            }, //根据传入的div块的id创建画布，画布宽高可以指定，并且可以传入背景图片，但是要求背景图片和宽高一样
            addCanvasGridLines() {
                this.addAllBridge();
                this.addTurnBridge();
            },
            addAllBridge() {
                for (var i = 0; i < this.allBridge.length; i++) {
                    this.nodeLayer.append('rect')
                        .attr("x", this.allBridge[i][0])
                        .attr("y", this.allBridge[i][1])
                        .attr("width", 100)
                        .attr("height", 40)
                        .attr("fill", "#5175BC")
                        .transition()

                    this.nodeLayer.append('text')
                        .attr("x", this.allBridge[i][0] + 35)
                        .attr("y", this.allBridge[i][1] + 25)
                        .text('引桥')
                        .attr("font-size", 15)
                        .attr("fill", "#fff")
                        .transition()
                }
            },
            addTurnBridge() {
                this.turnBridgeNode = this.svgViewport.append("g")
                    .attr("transform", "translate(400,210) rotate(0)");

                for (var y = 0; y < this.turnBridge.length; y++) {

                    this.turnBridgeNode.append('rect')
                        .attr("x", this.turnBridge[y][0] - 50)
                        .attr("y", this.turnBridge[y][1] - 100)
                        .attr("width", 40)
                        .attr("height", 200)
                        .attr("fill", "#fefe27")
                        .attr("stroke", "black")
                        .transition()

                    this.turnBridgeNode.append('text')
                        .attr("x", this.turnBridge[y][0] - 30)
                        .attr("y", this.turnBridge[y][1] - 90)
                        .text('转体桥')
                        .attr("font-size", 15)
                        .style('writing-mode', 'tb-rl')
                        .attr("fill", "red")
                        .transition()

                    this.turnBridgeNode.append('circle')
                        .attr("cx", this.turnBridge[y][0] - 30)
                        .attr("cy", this.turnBridge[y][1])
                        .attr("r", 15)
                        .attr("fill", "#fefe27")
                        .attr("stroke", "black")
                        .transition()

                }

            },

            zoomFunction() {
                var self = this;
                this.newx = d3.event.transform.rescaleX(this.xAxisScale());
                this.newy = d3.event.transform.rescaleY(this.yAxisScale());

                this.gX.call(this.xAxis().scale(this.newx));
                this.gY.call(this.yAxis().scale(this.newy));

                this.gridlinesX.call(
                    d3.axisBottom(this.xAxisScale())
                        .scale(this.newx)
                        .tickSize(-this.svgHeight)
                        .tickFormat("")
                );
                this.gridlinesY.call(
                    d3.axisLeft(this.yAxisScale())
                        .scale(this.newy)
                        .tickSize(-this.svgWidth)
                        .tickFormat("")
                );

                self.getProportion = self.size / d3.event.transform;
                self.scale = d3.event.transform;
            },//控制缩放，并且控制缩放时上面移动的点也跟着动，貌似没有跳跃现象

            startMove() {
                var angle = 360 - (this.initAngle.turn - this.position[1]);
                console.log(this.initAngle.turn - this.position[1])
                this.turnBridgeNode
                    .attr("transform", "translate(400,210) rotate(" + angle + ")");
            },//控制点的移动并且颜色变化


            init() {
                let block = document.getElementsByClassName("MapItemId")[0];
                this.startx = -10;
                this.starty = -10;
                this.svgWidth = block.offsetWidth;
                this.svgHeight = block.clientHeight;
                this.rangeWidth = 15;
                this.rangeHeight = 15;
                this.maxEnlarge = 1;
                this.maxNarrow = 1;
                this.createCanvas();
            },
        }
    }
</script>


<style>
    .svg-container {
        height: 100%;
        width: 100%;
    }
</style>
